<template>
    <ul>
        <li v-for="(item, index) in treeData" :key="item.id">
                <span @click="handleSubmit(item.id, item.show, index)">
                    <Row type="flex" justify="center" align="middle">
                        <Col>
                            <Icon :type="item.show===true?'ios-arrow-down':'ios-arrow-forward'" v-if="item.childs"/>
                        </Col>
                        <Col>
                            <Icon :type="item.icon" v-if="item.icon" size="24" :color="iconColor"/>
                        </Col>
                        <Col class="tree_font_color">
                            {{item.title}}
                        </Col>
                    </Row>
                </span>
            <Icon type="ios-add-circle" size="20" :color="iconColor" class="icon_hover" @click="channelNode(item,'add')"/>
            <Icon type="ios-create" size="20" :color="iconColor" @click="channelNode(item,'edit')"/>
            <Icon type="md-trash" size="20" :color="iconColor" @click="channelNode(item,'del')"/>
            <TreeItem :tree-data="item.childs" v-if="item.childs" :style="{display:item.show===true?'block':'none'}"></TreeItem>
        </li>
    </ul>
</template>

<script>

export default {
  name: 'TreeItem',
  data () {
    return {
      iconColor: '#186d8b'
    }
  },
  props: {
    treeData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  methods: {
    handleSubmit (id, show, index) {
      let data = this.treeData
      this.$common.util.treeFind(data, id, 'id', 'show', !show, 'childs')
      this.$set(this.treeData, index, data[index])
    },
    channelNode (item, action) {
      this.$emit('channel', item, action)
    }
  }
}
</script>

<style lang="less" scoped>
    @allColor:#186d8b;
    .tree {
        min-height:20px;
        padding:19px;
        margin-bottom:20px;
        background-color:#fbfbfb;
        border:1px solid @allColor;
        -webkit-border-radius:4px;
        -moz-border-radius:4px;
        border-radius:4px;
        -webkit-box-shadow:inset 0 1px 1px @allColor;
        -moz-box-shadow:inset 0 1px 1px @allColor;
        box-shadow:inset 0 1px 1px @allColor;
        color:@allColor;
    }
    .well {
        min-height: 20px;
        padding: 19px;
        margin-bottom: 20px;
        background-color: #f5f5f5;
        border: 1px solid @allColor;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px @allColor;
        box-shadow: inset 0 1px 1px @allColor;
    }
    ul {
        display: block;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        padding-inline-start: 40px;
    }
    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .tree li {
        list-style-type:none;
        margin:0;
        padding:10px 5px 0 5px;
        position:relative
    }
    .tree li .tree_font_color {
        color: @allColor;
    }
    .tree li::before, .tree li::after {
        content:'';
        left:-20px;
        position:absolute;
        right:auto
    }
    .tree li::before {
        border-left:1px solid @allColor;
        bottom:50px;
        height:100%;
        top:0;
        width:1px
    }
    .tree li::after {
        border-top:1px solid @allColor;
        height:20px;
        top:25px;
        width:25px
    }
    .tree li span {
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border:1px solid @allColor;
        border-radius:5px;
        display:inline-block;
        padding:3px 8px;
        text-decoration:none
    }
    .tree li.parent_li>span {
        cursor:pointer
    }
    .tree>ul>li::before, .tree>ul>li::after {
        border:0
    }
    .tree li:last-child::before {
        height:30px
    }
    .tree li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span {
        background:#eee;
        border:1px solid #94a0b4;
        color:#000
    }
    .icon_hover:hover{
        font-size: 22px;
    }
</style>
